<template>
    <div class="player-container" >
    <video
        id="my-video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="auto"
		style="width: 100%;"
		fluid="true"
		bigPlayButton="true"
    >
        <source id="app" :src="address" type="application/x-mpegURL" />
    </video>
    </div>
	
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";

  export default {
	  props: {
	    address: {
	      type: String,
	      default: ''
	    },
	  },
	  watch: {
        address:function(newVal, oldVal) {
            // TO DO
			debugger
            console.log("newVal:", newVal);
            console.log("oldVal:", oldVal);
        }
	  },
    data () {
      return {

      }
    },
	methods:{
		getVideo() {
		   videojs(
		       "my-video",
		       {
		           bigPlayButton: false,
		           textTrackDisplay: false,
		           posterImage: true,
		           errorDisplay: true,
		           controlBar: false
		       },
		       function() {
		           /* this.play(); */
		       }
		   );
		},
	},
	mounted() {
		var myPlayer = videojs("my-video");
		this.$once('hook:beforeDestroy', () => {
		      myPlayer.dispose();
		})
		this.$nextTick(() => {
		  this.getVideo()
		})
	},

  }
</script>
